<template>
  <div class="page-background">
    <div class="login-container">
      <el-tabs v-model="activeTab" class="tabs" stretch>
        <el-tab-pane label="登录" name="login">
          <el-form :model="loginForm" label-width="80px" class="form-container">
            <el-form-item label="用户名">
              <el-input
                  v-model="loginForm.userName"
                  size="large"
                  placeholder="请输入用户名"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input
                  type="password"
                  v-model="loginForm.password"
                  size="large"
                  placeholder="请输入密码"
                  show-password
              ></el-input>
            </el-form-item>
            <el-form-item class="full-width-btn">
              <el-button
                  type="primary"
                  size="large"
                  @click="login"
                  class="submit-btn"
              >立即登录</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="注册" name="register">
          <el-form
              :model="registerForm"
              :rules="registerRules"
              label-width="80px"
              class="form-container"
              ref="registerFormRef"
          >
            <el-form-item label="手机号" prop="phonenumber">
              <el-input
                  v-model="registerForm.phonenumber"
                  size="large"
                  placeholder="请输入手机号码"
              ></el-input>
            </el-form-item>
            <el-form-item label="用户名" prop="userName">
              <el-input
                  v-model="registerForm.userName"
                  size="large"
                  placeholder="请输入用户名"
              ></el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="nickName">
              <el-input
                  v-model="registerForm.nickName"
                  size="large"
                  placeholder="请输入昵称"
              ></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input
                  v-model="registerForm.email"
                  size="large"
                  placeholder="请输入邮箱"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                  type="password"
                  v-model="registerForm.password"
                  size="large"
                  placeholder="请输入密码"
                  show-password
              ></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input
                  type="password"
                  v-model="registerForm.confirmPassword"
                  size="large"
                  placeholder="请再次输入密码"
                  show-password
              ></el-input>
            </el-form-item>
            <el-form-item class="full-width-btn">
              <el-button
                  type="primary"
                  size="large"
                  @click="register"
                  class="submit-btn"
              >立即注册</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { sendRequest } from "@/util/request";

export default {
  name: "LoginRegister",
  created() {
    // 通过 `this.$route.query` 获取
    const type = this.$route.query.type;
    console.log('Query参数 type:', type);
    this.activeTab=type
  },
  data() {
    return {
      activeTab: "login",
      loginForm: {
        userName: "",
        password: ""
      },
      registerForm: {
        phonenumber: "",
        userName: "",
        nickName: "",
        email: "",
        password: "",
        confirmPassword: ""
      },
      registerRules: {
        phonenumber: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
        ],
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        nickName: [
          { required: true, message: "请输入昵称", trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { type: "email", message: "请输入正确的邮箱地址", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
        ],
        confirmPassword: [
          { required: true, message: "请再次输入密码", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (value !== this.registerForm.password) {
                callback(new Error("两次输入的密码不一致"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    login() {
      console.log("登录", this.loginForm);
      sendRequest("post", "index/user/loginUser", this.loginForm).then((res) => {
        if (res.code === 200) {
          this.$message.success("登录成功");
          localStorage.setItem("nickName", res.nickName);
          this.$router.push("/index/goodsSlideshow");
        }
      });
    },
    register() {
      this.$refs.registerFormRef.validate((valid) => {
        if (valid) {
          console.log("注册信息", this.registerForm);
          sendRequest("post", "index/user/registerUser", this.registerForm).then(
              (res) => {
                if (res.code === 200) {
                  this.$message.success("注册成功");
                  this.activeTab = "login"; // 切换回登录标签
                  this.registerForm = {
                    phone: "",
                    username: "",
                    nickname: "",
                    email: "",
                    password: "",
                    confirmPassword: ""
                  };
                }
              }
          );
        } else {
          console.log("表单验证失败");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
/* 新增页面背景 */
.page-background {
  min-height: 98vh;
  background-image: url("https://scpic.chinaz.net/files/pic/pic9/201709/zzpic6542.jpg");
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-container {
  width: 480px;
  padding: 40px;
  background: rgba(245, 245, 245, 0.5); /* 半透明背景 */
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* 标签样式 */
.tabs {
  font-size: 20px;
}

.tabs ::v-deep .el-tabs__item {
  font-size: 18px;
  font-weight: 600;
  padding: 0 30px;
  height: 60px;
  line-height: 60px;
}

.tabs ::v-deep .el-tabs__nav-wrap::after {
  height: 2px;
}

.tabs ::v-deep .el-tabs__active-bar {
  height: 3px;
  background-color: #0078ff;
}

/* 表单样式 */
.form-container {
  padding: 30px 10px 0;
}

/* 验证码相关样式（已移除） */
/* 按钮样式 */
.full-width-btn {
  margin-top: 30px;
}

.submit-btn {
  width: 100%;
  height: 48px;
  font-size: 16px;
  background: #0078ff;
  border: none;
  transition: all 0.3s;
}

.submit-btn:hover {
  background: #005fcc;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 120, 255, 0.3);
}

/* 输入框样式 */
.el-input ::v-deep .el-input__inner {
  height: 48px;
  line-height: 48px;
  border-radius: 8px;
}
</style>
